---
title: withLayoutContext
description: Create your own layouts.
---

Today there are a few built-in navigators: [Slot](/docs/components-Slot), [Stack](/docs/components-Stack), etc. But you may want to create your own.

A good example of this is the new [`react-native-bottom-tabs`](https://github.com/okwasniewski/react-native-bottom-tabs) library, that exports a React Navigation compatible navigator.

To make any React Navigation navigator work inside a One layout, use `withLayoutContext`:

```tsx
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation'
import { withLayoutContext } from 'one'

const NativeTabsNavigator = createNativeBottomTabNavigator().Navigator

export const NativeTabs = withLayoutContext(
  NativeTabsNavigator
)
```

Now you can use `NativeTabs` in any `_layout.tsx` file.
